﻿{ZL.Source id="图库模型数据源标签"/}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>{SField sid="图库模型数据源标签" FD="Title" page="0"/}_{$SiteName/}</title>
<meta name="Keywords" content="{SField sid="图库模型数据源标签" FD="Tagkey" page="0"/}">
{ZL:Boot()/}
<link href="{$CssDir/}global.css?Version={ZL.Label id="前端样式版本号"/}" rel="stylesheet"/>
<script src="/js/scrolltopcontrol.js" type="text/javascript"></script>
<script src="/JS/Controls/B_User.js"></script>
<script src="{$CssDir/}js/server.js"></script>
<style>
#Menu{SField sid="图库模型数据源标签" FD="NodeID" page="0"/} a { background:#e7e7e7; max-width:inherit;}
.content_pics { position:relative; width:100%; height:110px; padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:5px; border:1px solid #ddd; overflow:hidden;}
.content_pics #prev_small{ display:block; position:absolute; top:0; left:0; bottom:0; padding-top:20px; width:30px; font-size:3em; color:#fff; background:#000;}
.content_pics #next_small{ display:block; position:absolute; top:0; right:0; bottom:0; padding-top:20px; width:30px; font-size:3em; color:#fff; background:#000;}
.content_pics ul{ margin-left:30px; width:500%;}
.content_pics li{ float:left; margin-left:2px; margin-right:2px; width:150px; height:100px;}
.content_pics li img{ padding:2px; width:100%; height:100%; cursor:pointer;}
.content_pics li.active img{ border:1px solid #f00;}
.show_pic{ position:relative;}
.pics_set{ position:absolute; right:0; top:-40px; background:rgba(0,0,0,0.6); z-index:99; border-radius:50%;}
.pics_set a{ float:right; display:block; width:40px; height:40px; font-size:2em; background:#000; color:#fff; border-radius:50%; text-align:center;}
.show_pic .pic_detail{ position:absolute; bottom:120px; margin-bottom:0; width:100%; min-height:30px; padding:20px;}
.show_pic #prev_pic{ position:absolute; top:0; left:0; bottom:0; height:100%; width:50%; font-size:10em; color:#fff; }
.show_pic #prev_pic i { position:absolute; top:50%; left:10px; margin-top:-70px; color:#3095e4; display:none;} 
.show_pic #next_pic i { position:absolute; top:50%; right:10px; margin-top:-70px; color:#3095e4;  display:none;}
.show_pic a:hover{ text-decoration:none;}
.show_pic #next_pic{ position:absolute; top:0; right:0; bottom:0; width:50%; height:100; font-size:10em; color:#fff;}
.pic_detail span { font-style:italic; font-size:1.5em; color:#333;}
.pic_detail span strong{ color:#f00; font-size:1.4em;}
.pics_content_lt h1 { font-size:24px; text-align:center;}
.pics_content_lt p { margin-bottom:20px; text-align:center; color:#999;}
.pics_content_lt p span { margin-left:5px; margin-right:5px;}
.pics_content_lc { padding:20px; text-align:justify; text-justify:inter-ideograph; overflow:hidden;}
#cur_pic { display:block; position:absolute; top:50%; left:50%;}
.show_pic h1 { padding-left:92px; padding-right:92px; font-size:26px; color:#000; width:100%; z-index:1200;}
.show_pic h1 span { float:right; margin-left:5px; font-size:14px;}
.show_pic h1 span a { display:block; padding:6px 10px; background:#FBFBFB; border:1px solid #ddd; border-radius:4px; color:#000;}
.show_pic h1 span a i { color:#2D8CD7;}
.show_pic h1 span a:hover { color:#fff; background:#47A8F3;}
.show_pic h1 span a:hover i { color:#fff;}
</style>
</head>
<body id="header">
<div class="relative">
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="home_scolls">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">智能切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="{$LogoUrl/}" alt='{$SiteName/}' id='logos' onerror="this.onerror=null;this.src='{$LogoUrl/}'" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="{ZL:GetNodeListUrl(1)/}" target="_blank">首页</a></li>
<li><a href="{ZL:GetNodeLinkUrl(1)/}">门户网站</a></li>
<li><a href="{ZL:GetNodeLinkUrl(2)/}" target="_blank">线上商城</a></li>
<li><a href="/office" target="_blank">办公平台</a></li>
<li><a href="/Index" target="_blank">社区贴吧</a></li>
</ul>
<form class="navbar-form navbar-left" role="search" method="get" action="/Search/SearchList" target="_blank">
<div class="input-group">
<input type="text" class="form-control" name="keyword" placeholder="全站检索">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">搜索</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown nav_list">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-navicon"></i></a>
<ul class="dropdown-menu" role="menu">
{ZL.Label id="蓝色经典_顶部节点列表" ParentID="0" ShowNum="7" /}
</ul>
</li>
<li class="nav_user"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i>登录 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/User/" target="_blank">用户登录</a></li>
<li><a href="/User/Register" target="_blank">用户注册</a></li>
<li><a href="/User/Info/UserInfo" target="_blank">注册信息</a></li>
<li><a href="javascript:;" onClick="LogoutFun();">安全退出</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 导航到此结束 -->

<div class="pics_body" style="padding-bottom:0;">
<div class="show_pic" style="height:100vh;">
<h1 style="position:absolute; top:100px;">{SField sid="图库模型数据源标签" FD="Title" page="0"/} <span><a href="#"><i class="fa fa-comment"></i> 15615评论</a></span><span><a href="#"><i class="fa fa-share-square-o"></i> 我要分享</a></span></h1>
<div class="" style="height:100%;"><img id="cur_pic" src="" class="center-block img-responsive" data-target="" alt="" /></div>
<div class="pic_detail">
<span><strong></strong>/<span></span></span>
<span id="pic_detail_c"></span>
</div>
<a href="javascript:;" id="prev_pic"><i class="fa fa-angle-left"></i></a>
<a href="javascript:;" id="next_pic"><i class="fa fa-angle-right"></i></a>
</div>
<div class="content_pics" style="position:absolute; bottom:0; width:100%;">
<a href="javascript:;" id="prev_small"><i class="fa fa-angle-double-left"></i></a>
<a href="javascript:;" id="next_small"><i class="fa fa-angle-double-right"></i></a> 
<ul class="list-unstyled"  id="content_pics">
<script>
var json = '{SField sid="图库模型数据源标签" FD="PhotoUrl" page="0"/}'
var jsonArr= eval(json);
$("#cur_pic").attr("src","/UploadFiles/"+jsonArr[0].url);//
$("#cur_pic").attr("data-target",0);
$(".pic_detail #pic_detail_c").text(jsonArr[0].desc);
$(".pic_detail span").find("span").text(jsonArr.length);
$(".pic_detail span").find("strong").text(1);
for(var i=0; i<jsonArr.length; i++){
	document.write("<li><img src=/UploadFiles/"+jsonArr[i].url+" class='center-block img-responsive pitem' data-target='"+i+"' alt="+jsonArr[i].desc+"></li>");///UploadFiles/
}
$(".content_pics li").eq(0).addClass("active");
console.log(jsonArr)
</script>
</ul> 
</div>
</div>
</body>
</html>
<script>
setTimeout("ImgFun()",0)
function ImgFun()
{
	$("#cur_pic").css("margin-top","-"+($("#cur_pic").height()/2)+"px");
	$("#cur_pic").css("margin-left","-"+($("#cur_pic").width()/2)+"px");
}
//小图点击切换
$(".pitem").click(function(e) {
	var url=$(this).attr("src");
	var con=$(this).attr("alt"); 
    $("#cur_pic").attr("src",url);
	$("#cur_pic").css("margin-top","-"+($("#cur_pic").height()/2)+"px")
	$("#cur_pic").css("margin-left","-"+($("#cur_pic").width()/2)+"px")
	$(".show_pic").find("p").text(con);
	$(".content_pics li").removeClass("active");
	$(this).parent().addClass("active");
});
//大图左右方向键的显示/隐藏
$(".show_pic>a").mouseover(function(e) { 
    $(this).find("i").show();
}).mouseout(function(e) {
    $(this).find("i").hide();
});;
var run = document.getElementById("content_pics");	//容器ID
var slength = $(".content_pics").find("img").innerWidth();   //每个小图的宽度
var clength= $(".content_pics").innerWidth();	//小图列表所属容器的宽度
var index;	//当前大图的下标
var idnam;	//按钮名称
var initleft=30;	//初始化离左距离
var marginleftn;	//往左偏移量
$(".show_pic>a").click(function(e) { 
	idname=$(this).attr("id");
	index=$("#cur_pic").attr("data-target"); 
	index=parseInt(index)
	if(idname=="prev_pic"){ //判断是上一张还是下一张
		if(index-1<0) index=jsonArr.length-1;//已经是第一张时，则跳转最后一张图片
		else index=index-1;	 
	}
	else{ 
		if(index+1>jsonArr.length-1) index=0;//已经是最后一张时，则跳转第一张图片
		else index=index+1;
	}	
	$("#cur_pic").attr("src","/UploadFiles/"+jsonArr[index].url);//
	$("#cur_pic").attr("data-target",index);
	$("#cur_pic").css("margin-top","-"+($("#cur_pic").height()/2)+"px")
	$("#cur_pic").css("margin-left","-"+($("#cur_pic").width()/2)+"px")
	$(".content_pics li").removeClass("active");
	$(".content_pics li").eq(index).addClass("active");
	$(".pic_detail #pic_detail_c").html(jsonArr[index].desc); 
	$(".pic_detail span").find("strong").text(index+1);
	if(index+1>clength/slength){ 
		marginleftn = (index+1)*slength-clength;		
	}//当前选中的小图离左侧的距离大于小图列表所属容器宽时，则列表往左挪移1个图片的宽度
	else{
		marginleftn = initleft;  //对应初始化离左边的距离
	}
	run.style.marginLeft="-"+marginleftn+"px";//小图列表往左偏移的像素
});
//当图片列表总长小于或等于其容器宽时，隐藏小图的左右键
$().ready(function(e) {
    var count=$(".content_pics").find("img").length;
	if(count<clength/slength+1){
		$("#prev_small").hide();
		$("#next_small").hide();
		$(".content_pics ul").css({
			marginLeft:0,	
		})
		initleft=0;
	}
});
//小图列表的左右键点击事件
$("#prev_small").click(function(e) {
    $(".show_pic #prev_pic").click();
});
$("#next_small").click(function(e) {
    $(".show_pic #next_pic").click();
});
//左右方向键浏览图片
document.onkeydown=function(e){
	e=window.event||e;
	if(e.keyCode==37){
	  	$(".show_pic #prev_pic").click();
	}
	if(e.keyCode==39){
		$(".show_pic #next_pic").click();
	}
}
//自动播放
var timer = null;
$("#play").click(function(e) {
	var play=$(this).find(".fa-play");
	if(play.length>0){
		$(this).find("i").removeClass("fa-play");
		$(this).find("i").addClass("fa-pause");
		timer = setInterval(function(){
	 		$(".show_pic #next_pic").click();
		},5000)
	}
    else{
		$(this).find("i").removeClass("fa-pause");
		$(this).find("i").addClass("fa-play");
		clearInterval(timer);	
	}
});
var buser = new B_User();
buser.IsLogged(function(data,flag){
	if(flag)
	{
		data=JSON.parse(data);
		$(".nav_user>a").html(data.UserName+"的会员中心");
		$(".nav_user .dropdown-menu li:nth-child(1) a").html("会员中心");
		$(".nav_user .dropdown-menu li:nth-child(2)").remove();
	}
});
</script>